<!--
 * @FileDescription 导航菜单
 * @Author 杨宇翔
 * @Date 20220728 14:51:52
 * @LastEditors 杨宇翔
 * @LastEditTime 20220728 14:51:52
-->
<template>
    <div class="nav">
        <i></i>
        <button class="reset" type="button" @click="OnChanged">
            <span>双目相机</span>
            <img :src="state ? `/static/BinocularCamera/ic_shouqi.png` : `/static/BinocularCamera/ic_zhankai.png`">
        </button>
        <div v-for="config of ModuleConfigs" :key="config.Id" @change="changeModel(config.Id)">
            <input type="radio" name="双目相机模块" :id="'双目相机模块' + config.Id" :value="config.Name"
                v-model="BinocularCameraComponent.Default.Module.value" hidden>
            <label :for="'双目相机模块' + config.Id">
                <img :src="`/static/BinocularCamera/${config.Icon}_normal.png`">
                <img :src="`/static/BinocularCamera/${config.Icon}_select.png`">
                <span>{{ config.Description }}</span>
            </label>
        </div>
    </div>
</template>

<script setup lang="ts">
import BinocularCameraComponent, { ModuleConfigs, StructureComponent } from './BinocularCameraComponent';
import { ref } from 'vue';
import { PrincipleComponent } from './BinocularCameraComponent';
import { UsageComponent } from './BinocularCameraComponent';
function changeModel(value:any) {
    if(value == 3) {
        PrincipleComponent.Default.DescriptionAudioAccessibility.value = true
    }
    // 让其切换回2的时候，显示的是结构，而不是组成
    if(value == 2) {
        if(sessionStorage.getItem('currentOptions')) {
            StructureComponent.Default.OptionId.value = parseInt(sessionStorage.getItem('currentOptions')!)
        } else {
            StructureComponent.Default.OptionId.value = 1
        }
    }
}
const state = ref(true);
const sidebarTranslateX = ref('translateX(0)');
const buttonTranslateX = ref('translateX(0)');

function OnChanged() {
    state.value = !state.value;
    sidebarTranslateX.value = state.value ? 'translateX(0)' : 'translateX(-100%)';
    buttonTranslateX.value = state.value ? 'translateX(0)' : 'translateX(6rem)';
}
defineExpose({
    changeModel,
});
</script>

<style scoped>
.nav {
    position: absolute;
    left: 0;
    top: 8rem;

    display: flex;
    flex-direction: column;
    justify-content: stretch;
    gap: 2rem;

    padding-bottom: 2rem;

    background-color: #131620;

    border-radius: 0 2rem 2rem 0;

    transform: v-bind(sidebarTranslateX);

    transition: transform 300ms;
}

button {
    width: 100%;
    height: 5rem;

    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.4rem;

    padding-right: 2.4rem !important;

    background-color: #131620 !important;

    border-radius: 0 2.5rem 2.5rem 0;
    box-shadow: inset 0 -0.1rem 0 0 #1F1F2D;

    transform: v-bind(buttonTranslateX);

    transition: transform 300ms;

    cursor: pointer;
}

button>span:first-child {
    color: #B1B1D4;
    font-size: 1.8rem;
    font-weight: 500;
}

i {
    position: absolute;
    bottom: 0;

    display: block;
    width: 100%;
    height: calc(100% - 6rem);

    border-right: solid 0.6rem transparent;
    border-bottom: solid 0.6rem transparent;
    border-radius: 0 0 2rem 0;
    background-image: linear-gradient(#131620, #131620),
        linear-gradient(90deg, #218cde, #807de1);
    background-origin: border-box;
    background-clip: content-box, border-box;

    z-index: -1;
}

label {
    width: 14rem;
    height: 4.4rem;

    margin-left: 1rem;
    margin-right: 2rem;
    padding-left: 2rem;

    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 1rem;

    border-radius: 1rem;
}

input:checked+label {
    background-image: linear-gradient(270deg, #218CDE 0%, #807DE1 100%);
}

input:checked+label>img:last-of-type,
input+label>img:first-of-type {
    display: inline-block;
}

input:checked+label>img:first-of-type,
input+label>img:last-of-type {
    display: none;
}

label>img {
    width: 2rem;
    height: 2rem;
}

label>span {
    color: #81859C;
    font-size: 1.6rem;
}

label:hover>span {
    color: white;
}

input:checked+label>span {
    color: white;
    font-weight: 500;
}
</style>